<!-- 收货地址 -->
<template>
	<view >
		<view class="list">
			<view class="item" v-for="(item, index) in list" :key="index" @tap="select()">
				<view class="item-top">
					<view class="item-top-sidebar">
						<view class="name">
              {{item.name}}
							<text class="number">{{item.phone}}</text>
						</view>
						<view class="msg">
              {{item.address || '　'}}
						</view>
					</view>
					<button type="default" class="edit-btn" @tap.stop="add(item)">
            编辑
					</button>
				</view>
				<view class="item-bottom">
					<view class="radio-row" @tap.stop="choseItem(item)">
						<image class="circle"
							:src="item.is_default == 1 ? '../../static/select-pink.png' : '../../static/select.png'" />
						<text class="default">{{ item.is_default == 1 ? '当前默认地址' : '设为默认地址' }}</text>
					</view>
					<view class="btn-box">
						<button type="default" @tap.stop="del(item.id)">
							删除
						</button>
					</view>
				</view>
			</view>
			<!-- 无收货地址时显示 -->
			<view class="normal-box" v-if="list.length == 0">
        <u-empty class="" mode="data" v-if="!list || list.length === 0"></u-empty>
			</view>
		</view>
		
		<view class="footer">
			<button type="default" @tap="add()">添加收货地址</button>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				//自定义头部
				headerHeight: 0,

        list: [],
			}
		},
    onLoad(option) {

    },
		onShow() {
      this.userAddressList();
		},
		methods: {
      userAddressList() {
        this.$http('api/newapi/userAddressList').then(res => {
          this.list = res.data;
        });
      },

      // 删除地址
      del(id) {
        uni.showModal({
          title: '提示',
          content: '真的要删除吗？',
          success: res => {
            if (res.confirm) {
              this.$http('api/newapi/delAddress', {id}, 'post').then(res => {
                uni.showToast({
                  icon: 'none',
                  title: '删除成功',
                });
                this.userAddressList();
              });
            }
          }
        });
      },
      /**
       * 设置默认地址
       */
      choseItem(item) {
        const is_default = item.is_default == 1 ? 0 : 1;
        const update = () => {
          this.$http('api/newapi/saveUserAddress', {
            id: item.id,
            is_default,
          }).then(res => {
            this.userAddressList();
          });
        };
        if (is_default == 1) {
          const list = this.list.filter(item => item.is_default == 1);
          if (list.length > 0) {
            this.$http('api/newapi/saveUserAddress', {
              id: list[0].id,
              is_default: 0,
            }).then(() => update());
          } else {
            update();
          }
        } else {
          update();
        }
      },

      /**
       * 跳转新建收货地址
       */
      add(item) {
        if (item) {
          uni.setStorageSync('page_params_address_add_detail', item);
        }
        uni.navigateTo({
          url: '/pages/my/address-add',
        });
      },

		}
	}
</script>

<style>
page {
  background: #f5f5f5;
}
</style>
<style scoped lang="scss">
page{
  background: #f5f5f5;
}
	.radio-row {
		display: flex;
		align-items: center;
	}
	
	.circle {
		width: 27rpx;
		height: 27rpx;
    filter: brightness(0.2);
	}
	
	.default {
		color: #3c3c3c;
		font-size: 24rpx;
		line-height: 24rpx;
		margin-left: 16rpx;
	}
	
	.list {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding: 20rpx 22rpx 0;
		box-sizing: border-box;
	}
	
	.item {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-radius: 20rpx;
		background-color: #fff;
		margin-bottom: 18rpx;
		padding: 0 18rpx;
		box-sizing: border-box;
	}
	
	.item:last-child {
		margin-bottom: 0;
	}
	
	.item-top {
		width: 100%;
		display: flex;
		align-items: center;
		padding: 30rpx 0 24rpx;
		box-sizing: border-box;
	}
	
	.item-top-sidebar {
		flex: 1;
		display: flex;
		flex-direction: column;
	}
	
	.address-icon {
		width: 70rpx;
		height: 70rpx;
		margin-right: 16rpx;
	}
	
	.item-bottom {
		width: 100%;
		height: 68rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #dadada;
		box-sizing: border-box;
	}
	
	.name {
		width: 100%;
		display: flex;
		align-items: center;
		color: #3c3c3c;
		font-size: 26rpx;
	}
	
	.number {
		color: #999999;
		font-size: 22rpx;
		margin-left: 24rpx;
	}
	
	.msg {
		width: 100%;
		color: #999999;
		font-size: 22rpx;
		margin-top: 5rpx;
	}
	
	.btn-box {
		display: flex;
		align-items: center;
	}
	
	.btn-box button {
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #999999;
		margin: 0;
		background-color: initial;
		border-radius: initial;
		padding: 0;
    &::after{
      display: none;
    }
	}
	
	.btn-box button:last-child {
		margin-right: 0;
	}
	
	.btn-box button image {
		width: 25rpx;
		height: 25rpx;
		margin-right: 16rpx;
    filter: brightness(0.2);
	}
	
	.edit-btn {
    width: max-content;
    padding: 0;
		background: initial;
		border-radius: initial;
		margin: 0;
    border: none;
    color: #999999;
    &::after{
      display: none;
    }
	}

	.footer {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 60rpx 85rpx;
		box-sizing: border-box;
	}
	
	.footer button {
		width: 100%;
		height: 100rpx;
		line-height: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #fff;
		font-size: 34rpx;
		font-weight: 500;
    background: linear-gradient(90deg, #EEA634, #DE2D32);
		border-radius: 100rpx;
	}
	
	.normal-box {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #FFFFFF;
		font-size: 32rpx;
		padding: 100rpx 0;
	}
	
	.normal-box image {
		width: 500rpx;
		margin-bottom: 60rpx;
	}
</style>
